<template>
  <div id="index-page" class="article-list">
    <div class="banner-list" v-if="banner">
      <el-carousel trigger="click" height="210px" style="border-radius:6px;">
        <el-carousel-item v-for="(item,index) in banner.banners" :key="index">
          <a :href="item.link" target="_blank">
            <div class="banner-item">
              <img class="banner-img" :title="item.title" :alt="item.title" :src="`${apiBase}/${item.image}`">
              <p class="title">{{item.title}}</p>
              <p class="desc">{{item.desc}}</p>
            </div>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-skeleton :rows="15" animated :loading="skeletonShow"/>
    <div class="article-list" v-if="!skeletonShow">
      <article-item v-for="item in list" :key="item.id" :data="item"></article-item>
      <article-empty v-if="total===0"></article-empty>
    </div>
    <div class="page" v-if="!skeletonShow">
      <el-pagination
        background
        :currentPage="page"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="pageChange">
      </el-pagination>
    </div>
    <div class="wap-page" v-if="!skeletonShow">
      <el-pagination
        background
        :currentPage="page"
        :page-size="limit"
        :pager-count="4"
        layout="prev, pager, next"
        :total="total"
        @current-change="pageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
const { public: { apiBase } } = useRuntimeConfig()
const route = useRoute()
const { bannerApi,articleApi } = useApi()
const skeletonShow = ref(true)
const page = ref(Number(route.query.page)||1)
const limit = 8
let [{data:banner},{data:{total},data:{list}}] = await Promise.all([
    bannerApi.getBanner('index'),
    articleApi.getList({page:page.value,limit:limit})
])
skeletonShow.value = false
const pageChange = async (value:number) => {
  page.value = value
  await navigateTo({
    path:'/',
    query:{
      page:value
    }
  })
}
watch(() => route.query, async ()=>{
  skeletonShow.value = true
  const {data:{total:resultTotal},data:{list:resultList}} = await articleApi.getList({page:page.value,limit:limit})
  total = resultTotal
  list = resultList
  skeletonShow.value = false
})
</script>

<style lang="less">
  @import "../assets/styles/pages/article-list.less";
</style>
